<template>
  <div class="mobile-container">
    <div class="app-content">
      <!-- 顶部栏 -->
      <div class="header">
        <div class="header-top">
          <div class="back-icon" @click="handleBack">
            <Icon icon="mdi:arrow-left"/>
          </div>
          <div class="page-title">通知</div>
          <div class="placeholder"></div>
        </div>
      </div>

      <!-- 通知列表容器 -->
      <div class="list-container">
        <div
          class="notification-list"
          ref="listContainer"
        >
          <div
            class="notification-item"
            v-for="notification in notifications"
            :key="notification.id"
            @click="viewNotificationDetail(notification)"
          >
            <div class="notification-content">
              <div class="notification-title">{{ notification.type }}</div>
              <div class="notification-action">
                <span class="action-text">查看详情</span>
                <Icon icon="mdi:chevron-right" class="action-icon" />
              </div>
            </div>
            <div class="notification-time">{{ notification.time }}</div>
          </div>

          <!-- 加载指示器 -->
          <div class="loader-box" ref="loader">
            <div class="loader" :class="{ hidden: !loading }"></div>
            <div class="nothing" :class="{ hidden: hasMore }">没有更多了~</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon } from '@iconify/vue2'

export default {
  name: 'NotificationListPage',
  components: {
    Icon
  },
  data() {
    return {
      loading: false,
      loadLock: false,
      hasMore: true,
      LIST_LIMIT_CNT: 15,
      LOADING_TIME: 500,
      observer: null,
      // 模拟通知数据
      allNotifications: [
        {
          id: 1,
          time: '2025-10-17 22:35:12',
          type: '系统维护通知'
        },
        {
          id: 2,
          time: '2025-10-17 20:51:25',
          type: '新版本发布'
        },
        {
          id: 3,
          time: '2025-10-10 08:51:36',
          type: '安全提醒'
        },
        {
          id: 4,
          time: '2025-10-09 15:20:18',
          type: '活动通知'
        },
        {
          id: 5,
          time: '2025-10-08 11:45:33',
          type: '功能更新'
        },
        {
          id: 6,
          time: '2025-10-07 09:30:15',
          type: '服务公告'
        },
        {
          id: 7,
          time: '2025-10-06 18:22:47',
          type: '优惠活动'
        },
        {
          id: 8,
          time: '2025-10-05 14:10:29',
          type: '系统通知'
        },
        {
          id: 9,
          time: '2025-10-04 10:05:12',
          type: '版本预告'
        },
        {
          id: 10,
          time: '2025-10-03 07:45:38',
          type: '安全更新'
        },
        {
          id: 11,
          time: '2025-10-02 16:30:22',
          type: '活动结束提醒'
        },
        {
          id: 12,
          time: '2025-10-01 12:15:44',
          type: '节日祝福'
        },
        {
          id: 13,
          time: '2025-09-30 09:20:33',
          type: '系统优化'
        },
        {
          id: 14,
          time: '2025-09-29 14:45:18',
          type: '功能预告'
        },
        {
          id: 15,
          time: '2025-09-28 11:30:25',
          type: '维护完成'
        },
        {
          id: 16,
          time: '2025-09-27 16:15:42',
          type: '新功能上线'
        },
        {
          id: 17,
          time: '2025-09-26 13:40:19',
          type: '活动通知'
        },
        {
          id: 18,
          time: '2025-09-25 10:25:36',
          type: '版本更新'
        },
        {
          id: 19,
          time: '2025-09-24 08:50:27',
          type: '系统提醒'
        },
        {
          id: 20,
          time: '2025-09-23 17:35:14',
          type: '服务升级'
        },
        {
          id: 21,
          time: '2025-09-22 17:35:14',
          type: '功能优化'
        }
      ],
      notifications: []
    }
  },
  mounted() {
    // 初始化加载数据
    this.loadData()

    // 设置IntersectionObserver监听加载器
    this.$nextTick(() => {
      this.setupObserver()
    })
  },
  beforeDestroy() {
    // 清理observer
    if (this.observer) {
      this.observer.disconnect()
    }
  },
  methods: {
    handleBack() {
      this.$router.go(-1)
    },

    setupObserver() {
      const loader = this.$refs.loader
      if (!loader) return

      this.observer = new IntersectionObserver(
        ([entry]) => {
          if (entry.isIntersecting && !this.loadLock && this.hasMore) {
            this.loadData()
          }
        },
        {
          root: this.$refs.listContainer, // 指定滚动容器为root
          rootMargin: '0px',
          threshold: 0.1
        }
      )

      this.observer.observe(loader)
    },

    loadData() {
      if (this.loadLock || !this.hasMore) return

      this.loadLock = true
      this.loading = true

      setTimeout(() => {
        const currentLength = this.notifications.length

        if (currentLength >= this.allNotifications.length) {
          this.hasMore = false
          this.loading = false
          this.loadLock = false
          return
        }

        const nextItems = this.allNotifications.slice(currentLength, currentLength + 10)
        this.notifications = [...this.notifications, ...nextItems]

        // 加载后检查是否到达末尾
        this.hasMore = this.notifications.length < this.allNotifications.length

        this.loading = false
        this.loadLock = false
      }, this.LOADING_TIME)
    },

    viewNotificationDetail(notification) {
      this.$router.push('/userdistribution/notification/detail?id=' + notification.id)
    }
  }
}
</script>

<style scoped>
/* 关键修复：固定容器高度 */
.mobile-container {
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
}

.app-content {
  width: 375px;
  height: 667px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 顶部栏样式 */
.header {
  padding: 15px 20px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-icon {
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #333;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.placeholder {
  width: 36px;
}

/* 列表容器 - 关键修复 */
.list-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.notification-list {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
}

.notification-item {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: white;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.notification-item:active {
  background: #f8f9fa;
}

.notification-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.notification-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.notification-action {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #667eea;
}

.action-text {
  font-size: 14px;
  color: #667eea;
}

.action-icon {
  font-size: 16px;
  color: #667eea;
}

.notification-time {
  font-size: 12px;
  color: #999;
}

/* 加载指示器样式 */
.loader-box {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.loader {
  width: 25px;
  height: 25px;
  border: 3px solid #ddd;
  border-radius: 50%;
  border-bottom: 3px solid #717171;
  transform: rotate(0deg);
  animation: loading 1s linear infinite;
}

.nothing {
  font-size: 14px;
  color: #999;
}

.hidden {
  display: none;
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 响应式设计 */
@media (max-width: 375px) {
  .mobile-container {
    padding: 0;
  }

  .app-content {
    width: 100%;
    height: 100vh;
    border-radius: 0;
  }
}

/* 滚动条样式 */
.notification-list::-webkit-scrollbar {
  width: 4px;
}

.notification-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.notification-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}
</style>
